<template>
    <div class="main-con editHorsemanInfo">
        <!-- 顶部导航 -->
        <div class="breadcrumb-con">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/index/horsemanInfo' }">骑手信息</el-breadcrumb-item>
                <el-breadcrumb-item>{{ editText }}骑手信息</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <!-- 表单信息 -->
        <div class="form-con">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
                <h2 class="item-title">
                    骑手信息
                </h2>
                <div class="form-item-con">
                    <el-form-item label="角色" required>
                        <div class="form-item-input">
                            <el-select size="small" v-model="ruleForm.role" placeholder="请选择角色">
                                <el-option v-for="item in roleOptions" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </el-form-item>
                    <el-form-item label="工作状态" required>
                        <el-radio-group v-model="ruleForm.status">
                            <el-radio :label="1">开工</el-radio>
                            <el-radio :label="0">停工</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="用户名称" prop="userName">
                        <div class="form-item-input">
                            <el-input size="small" v-model="ruleForm.userName" placeholder="请输入用户名称"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item label="手机号" prop="telPhone">
                        <div class="form-item-input">
                            <el-input size="small" v-model="ruleForm.telPhone" placeholder="请输入手机号"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item label="门店名称" required>
                        <div class="form-item-input">
                            <el-autocomplete size="small" v-model="ruleForm.storeName" :fetch-suggestions="querySearch"
                                placeholder="请输入门店名称" value-key="storeName" :trigger-on-focus="false" @select="handleSelect"
                                v-if="ruleForm.role == 4">
                            </el-autocomplete>
                        </div>
                        <div class="form-item-input" v-if="ruleForm.role == 8">
                            <div class="_storeList">
                                <div class="_storeList-item" v-for="(item,index) in selectStoreList" :key="index">{{item.storeName}}<span
                                        class="closeItem" @click="delStore(index)">&times;</span></div>
                            </div>
                            <el-button type="primary" v-if="ruleForm.role == 8" size="mini" @click="selectStore">选择门店</el-button>
                        </div>
                    </el-form-item>
                </div>
                <div class="submit-btn-con">
                    <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
                    <el-button @click="handleBack">取消</el-button>
                </div>
            </el-form>
        </div>

        <!-- 选择门店 -->
        <m-selectstore :showSelectStoreCon="showSelectStoreCon" @close="colseStoreCon" @sure="sureSelectStore"></m-selectstore>
    </div>
</template>

<script>
import {
    findStoreInfoByStoreName,
    addHorsemanInfo,
    updateHorsemanInfo
} from "@/common/service/horsemanManagement/horsemanInfo.js";
import mSelectstore from "./selectStore.vue";
export default {
    name: "editHorsemanInfo",
    data() {
        var validatetelPhone = (rule, value, callback) => {
            var re = /^[0123456789]\d{10}$/;
            if (value === "") {
                callback(new Error("请输入手机号"));
            } else if (!re.test(value)) {
                callback(new Error("手机号格式不正确"));
            } else {
                callback();
            }
        };
        return {
            editType: "", //操作类型  add=添加  update=修改
            editText: "", //操作文字
            editId: "", //操作的id
            editData: "", //操作的数据
            //表单信息
            ruleForm: {
                role: 4,
                status: 0,
                userName: "",
                telPhone: "",
                storeNo: "",
                storeName: ""
            },
            rules: {
                userName: [
                    {
                        required: true,
                        message: "请输入用户名称",
                        trigger: "blur"
                    }
                ],
                telPhone: [
                    {
                        required: true,
                        validator: validatetelPhone,
                        trigger: "blur"
                    }
                ]
            },
            roleOptions: [
                {
                    label: "骑手组长",
                    value: 8
                },
                {
                    label: "骑手",
                    value: 4
                }
            ], //角色下拉框数据

            selectStoreList: [], //选择的门店列表

            showSelectStoreCon: false
        };
    },
    created() {
        this.editType = this.$route.query.editType;
        this.editText = this.$route.query.editText;
        if (this.editType == "update") {
            this.editId = this.$route.query.editId;
            this.editData = JSON.parse(localStorage.getItem("editData"));
            this.ruleForm.id = this.editData.id;
            this.ruleForm.role = this.editData.role;
            this.ruleForm.status = this.editData.status;
            this.ruleForm.userName = this.editData.userName;
            this.ruleForm.telPhone = this.editData.telPhone;
            this.ruleForm.storeNo = this.editData.storeNo;
            this.ruleForm.storeName = this.editData.storeName;
            if (this.editData.role == 8) {
                this.selectStoreList = this.editData.horsemanStoreList;
            }
        }
    },
    beforeDestroy() {
        //清除本地缓存的编辑数据
        localStorage.removeItem("editData");
    },
    methods: {
        /*-----------------------------新增操作-----------------------------*/
        _addHorsemanInfo() {
            if (this.ruleForm.role == 8) {
                if (this.selectStoreList.length == 0) {
                    this.$message.error("门店不能为空");
                    return false;
                }
                var _storeNo = "";
                var _storeName = "";
                this.selectStoreList.forEach(function(item, idx) {
                    if (idx == 0) {
                        _storeNo += item.storeNo;
                        _storeName += item.storeName;
                    } else {
                        _storeNo += "," + item.storeNo;
                        _storeName += "," + item.storeName;
                    }
                });
                this.ruleForm.storeNo = _storeNo;
                this.ruleForm.storeName = _storeName;
            } else {
                if (this.ruleForm.storeName == "") {
                    this.$message.error("门店不能为空");
                    return false;
                }
            }
            addHorsemanInfo(this.ruleForm)
                .then(res => {
                    this.$message({
                        type: "success",
                        message: "添加成功!"
                    });
                    this.handleBack();
                })
                .catchh(err => {
                    this.$message.error(err.message);
                });
        },

        /*-----------------------------编辑操作-----------------------------*/
        _updateHorsemanInfo() {
            if (this.ruleForm.role == 8) {
                if (this.selectStoreList.length == 0) {
                    this.$message.error("门店不能为空");
                    return false;
                }
                var _storeNo = "";
                var _storeName = "";
                this.selectStoreList.forEach(function(item, idx) {
                    if (idx == 0) {
                        _storeNo += item.storeNo;
                        _storeName += item.storeName;
                    } else {
                        _storeNo += "," + item.storeNo;
                        _storeName += "," + item.storeName;
                    }
                });
                this.ruleForm.storeNo = _storeNo;
                this.ruleForm.storeName = _storeName;
            } else {
                if (this.ruleForm.storeName == "") {
                    this.$message.error("门店不能为空");
                    return false;
                }
            }
            updateHorsemanInfo(this.ruleForm)
                .then(res => {
                    this.$message({
                        type: "success",
                        message: "编辑成功!"
                    });
                    this.handleBack();
                })
                .catchh(err => {
                    this.$message.error(err.message);
                });
        },

        /*-----------------------------保存校验数据操作-----------------------------*/
        // 点击确定
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    if (this.editType == "add") {
                        this._addHorsemanInfo();
                    } else if (this.editType == "update") {
                        this._updateHorsemanInfo();
                    }
                } else {
                    return false;
                }
            });
        },

        /*-----------------------------模糊查询门店-----------------------------*/
        //模糊查询门店
        querySearch(queryString, cb) {
            const data = {
                storeName: this.ruleForm.storeName
            };
            findStoreInfoByStoreName(data)
                .then(res => {
                    cb(res);
                })
                .catch(res => {
                    this.$message.error(err.message);
                });
        },
        //勾选查询的门店
        handleSelect(val) {
            this.ruleForm.storeNo = val.storeNo;
            this.ruleForm.storeName = val.storeName;
        },

        /*-----------------------------选择门店操作-----------------------------*/
        //显示选择门店弹窗
        selectStore() {
            this.showSelectStoreCon = true;
        },
        //隐藏选择门店弹窗
        colseStoreCon(val) {
            this.showSelectStoreCon = val;
        },
        //渲染选择的门店
        sureSelectStore(val) {
            const self = this;
            if (!this.selectStoreList) {
                this.selectStoreList = [];
            }
            var selected = this.selectStoreList;
            var curSelect = JSON.parse(val);
            curSelect.forEach((item, index) => {
                var flag = true;
                selected.forEach((item1, index) => {
                    if (item1.storeName == item.storeName) {
                        flag = false;
                    }
                });
                if (flag) {
                    self.selectStoreList.push(item);
                }
            });
            this.showSelectStoreCon = false;
        },
        //删除门店
        delStore(idx) {
            this.selectStoreList.splice(idx, 1);
        },

        /*-----------------------------返回操作-----------------------------*/
        handleBack() {
            this.$router.push({
                path: "/index/horsemanInfo"
            });
        }
    },
    components: {
        "m-selectstore": mSelectstore
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
._storeList {
    display: inherit;
    min-height: 80px;
    max-height: 200px;
    overflow: auto;
    width: 200px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 5px;
}

._storeList-item {
    position: relative;
    padding: 0;
    margin: 0;
    height: 18px;
    padding: 2px 10px;
    float: left;
    background-color: #f2f2f2;
    font-size: 12px;
    line-height: 18px;
    border-radius: 4px;
    margin-right: 8px;
    margin-bottom: 8px;
    box-sizing: content-box;
}

.closeItem {
    display: block;
    height: 14px;
    width: 14px;
    border-radius: 50%;
    font-size: 12px;
    position: absolute;
    right: -4px;
    top: -4px;
    color: #999999;
    line-height: 14px;
    background-color: #cccccc;
    text-align: center;
    cursor: pointer;
}

.selectStoreBtn {
    font-size: 14px;
    cursor: pointer;
    color: #3399ff;
}
</style>